<template>
	<view @click="goProductDetail" class="itemWrapper">
		<view class="topItem pb20 rimb bcX ">
			<view class="cY" style="width:518rpx;">
				<view class="mr10">
					<image @tap.stop="enterShop()" style="height:38rpx;width:38rpx;" mode="scaleToFill" src="/static/orderList/D1.png"></image>
				</view>
				<view class="" style="margin-top: -4rpx;">
					<text class="easy-tit"  @tap.stop="enterShop()">{{orderObj.shopName}}</text>
					<text class="ml20 mr20" style="color: #979797">|</text>
					<text class="created-time">{{ orderObj.createTime }}</text>
				</view>
			</view>
			<view class=" " style="position: absolute; right:-20rpx;top:3rpx;">
				
				<text :class="{'status-cn': true, isRed: isStatusCnAlertColor}" v-if="orderObj.status==='04'">待联系(商家)</text>
				<text :class="{'status-cn': true, isRed: isStatusCnAlertColor}" v-else>{{ statusCn }}(商家)</text>
			</view>
		</view>

		<!-- 中间位置 -->
		<view :class="{centerItem: true, noMarginBottom: !showBottomBtns()}">
			<view class="product-box mr20">
				<image class="product-image" :src="orderObj.mainImageUrl"></image>
			</view>
			<view class="right">
				<text class="top">
					<!-- 续租小标签 -->
					<text v-if="showXuzu" class="xzTag">续租</text>
					<text class="product-name">{{ orderObj.productName }}</text>
				</text>
				<view class="" style=" line-height:38rpx;">
					<text class="bottom">
						套餐： <text class="price-cls">{{ orderObj.skuTitle }}</text>
						<!-- 总租金
					<text class="price-cls">¥{{ orderObj.totalRent }}</text> -->
					</text>
				</view>
			</view>
		</view>
          
		  
		  <!-- 底部按钮位置 -->
		  <view v-if="showBottomBtns()" class="bottomBtns ">
		  		<view class="showBtn">
		  			<OrderActionBtns :orderVO="orderObj"></OrderActionBtns>
		  		</view>
		  	
		  </view>
		  <!-- 联系商家 -->
		 <view class="btn-box mt20" v-if="!showBottomBtns()">
		  	<view class="contactBusiness keepRight" @tap.stop="contact()" >
		  		联系商家
		  	</view>
			
			</view>	
	</view>
</template>

<script>
	/**
	 *  单个订单的展示组件
	 *  父组件并不需要知道到底应该展示那个子按钮，在这里就把所有组件都堆上去，是否展示，取决于按钮组件内部的逻辑
	 *  如果父组件需要知道到底该显示哪些子按钮的话，那么在父组件就需要通过逻辑确定所需要显示的按钮列表，没必要把这部分逻辑放在父组件
	 *  把所有按钮都堆在这里的话，那么父组件就不需要考虑展示逻辑，通过按钮名字便可以轻松定位到具体应该修改哪个组件文件，然后便可以修改对应逻辑
	 */
	import {
		EMPTY_PLACEHOLDER,
		orderStatusNumber2Cn
	} from "../../utils/constant"
	import {
		checkOrderNeedPay,
		checkOrderNeedShouhuo,
		checkOrderOverdue,
		checkOrderSettle,
		checkOrderHasClose,
		checkOrderHasDone,
		getOrderId,
		getShopId,
		getProductId,
		getServiceTel
	} from "./orderActionBtns/utils/checkShowBtn"
	import OrderActionBtns from "./orderActionBtns/orderActionBtns"

	export default {
		name: "orderItem",

		props: {
			orderObj: {
				type: Object,
				default: {},
			}, // 订单对象
		},

		data() {
			return {
				isShow:false,
				productId: '' //产品id
			}
		},

		components: {
			OrderActionBtns,
		},

		computed: {
			/**
			 * 获取到状态的中文名称
			 */
			statusCn: function() {
				const isOrderYuQi = checkOrderOverdue(this.orderObj) // 判断订单是否已逾期
				if (isOrderYuQi) return "已逾期"
				const cn = orderStatusNumber2Cn[this.orderObj.status]
				return cn || EMPTY_PLACEHOLDER
			},

			/**
			 * 判断是否显示续租
			 */
			showXuzu: function() {
				return this.orderObj?.orderType == "03"
			},

			/**
			 * 判断状态是否是红色
			 */
			isStatusCnAlertColor: function() {
				return checkOrderNeedPay(this.orderObj) ||
					checkOrderNeedShouhuo(this.orderObj) ||
					checkOrderOverdue(this.orderObj) ||
					checkOrderSettle(this.orderObj)
			},
		},
		onLoad() {},
		methods: {

			/**
			 * 判断是否需要显示联系商家和再次下单按钮 已完成
			 */
			showFinishBtns() {
				return checkOrderHasDone(this.orderObj)
			},
			/**
			 * 判断是否需要显示底部按钮；除了已关闭和待审核的订单外，都要显示
			 */
			showBottomBtns() {
				return !checkOrderHasClose(this.orderObj)
			},

			/**
			 * 跳转到订单详情页面
			 */
			goProductDetail() {
				const orderId = getOrderId(this.orderObj)
				this.$onTo(`/pages/orderDetail/orderDetail?orderId=${orderId}`)
			},
			// 联系商家
			contact() {
				const phone = getServiceTel(this.orderObj)
				// console.log('联系商家',phone)
				uni.makePhoneCall({
					phoneNumber: phone,
				})
			},
			// 重新下单跳到该订单的详情页
			reOrderBtn() {
				const productId = getProductId(this.orderObj)
				// console.log(productId ,"productId")
				this.$onTo(
					`/pages/product/product?productId=${
							productId}`
				)
			},
			// 点击该店铺名称进入该店铺
			enterShop(){
				const shopId = getShopId(this.orderObj)
				this.$onTo(
					`/pages/shop/shop?shopId=${
							shopId}`
				)
			}
		}
	}
</script>
<style>
	scroll-view ::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	::-webkit-scrollbar {
		display: none;
	}
</style>
<style lang="scss" scoped>
	.itemWrapper {
		padding: 20rpx  30rpx ;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.topItem {
		position: relative;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;

		.easy-tit {
			font-size: 30rpx;
			color: #01C7BB;
		}

		.created-time {
			font-size: 25rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #606060;
		}

		.status-cn {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1C1C;
		}

		.isRed {
			color: #E52021;
		}
	}

	.centerItem {

		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;

		.product-box {
			@include global-border-gray(1px);
			border: 1rpx soild red;
			padding: 10rpx 0rpx 10rpx 10rpx;

			.product-image {
				width: 150rpx;
				height: 160rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			line-height: 10rpx;

			.top {
				margin-bottom: 26rpx;
				font-size: 28rpx;
				min-height: 2.85em;
				max-height: 2.85em;
				overflow: hidden;
				text-overflow: ellipsis;

				.xzTag {
					@include global-background-color();
					border-radius: 15rpx 0rpx 15rpx 0rpx;
					font-size: 22rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					padding: 2rpx 6rpx;
					margin-right: 10rpx;
				}

				.product-name {
					font-size: 26rpx;
					line-height: 44rpx;
					font-weight: 400;
					color: #333333;
					font-family: Arial;
				}
			}

			.bottom {
				font-size: 23rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #BABABA;

				.price-cls {
					margin-left: 4rpx;
					font-weight: 400;
					color: #333333;
					font-size: 23rpx;
				}
			}
		}
	}

	.noMarginBottom {
		margin-bottom: 0 !important;
	}
	.bottomBtns{
		// margin-bottom: 80rpx;
	}

	.btn-box {
		
		// position: relative;
		.keepRight{
			// position: absolute;
			// // right: -12rpx;
			// bottom: -12rpx;
			
		}
		.contactBusiness {
			display: flex;
			justify-content:center;
			align-items: center;
			width: 138rpx;
			height: 50rpx;
			border-radius: 18rpx;
			border: 1px solid #01C7BB; // 1rpx 在高分辨率设备上可能会遇到显示不出来的问题，所以这里改成1px
			// text-align: center;
			// line-height: 50rpx;
			font-weight: 400;
			color:#01C7BB;
			font-size: 24rpx;
		}
		.showBtn{
			
		}
	}
</style>
